<template>
	<view class="home">
		<view class="car-item u-flex-y-center" v-for="(item,index) in data.car" :key="item.id" @click="handleChange(index)">
			<u-image src="@/static/images/icon_check.png" width="40rpx" :fade="false" height="40rpx"
				v-show="index != data.current" mode=""></u-image>
			<u-image src="@/static/images/icon_check_yes.png" width="40rpx" :fade="false" height="40rpx"
				v-show="index == data.current" mode=""></u-image>
			<view class="u-flex-1 u-m-l-30">
				<u-text :text="item.number" size="40rpx" bold></u-text>
				<view class="u-flex-y-center">
					<view><u-text text="王自健" size="28rpx" margin="20rpx 0 0 0" color="#999"></u-text></view>
					<view><u-text text="|" size="28rpx" margin="20rpx 20rpx 0 20rpx" color="#999"></u-text></view>
					<view><u-text text="12345678941" size="28rpx" margin="20rpx 0 0 0" color="#999"></u-text></view>
				</view>
			</view>
		</view>
		<view class="u-p-l-60 u-p-r-60 action-bar">
			<u-button type="primary" customStyle="height:100rpx;fontSize:36rpx;borderRadius:12rpx"
				@click="confirmCar">确认</u-button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import { carList } from '../../config/api';
	const data = ref({
		car: [],
		current: 0
	})
	onShow(() => {
		_carList()
	})
	const confirmCar = () => {
			uni.$emit('changeCar', data.value.car[data.value.current])
			uni.navigateBack()
	}
	const handleChange = (index) => {
		data.value.current = index
	}
	// 车辆列表
	const _carList = () => {
		carList().then(res => {
			console.log(res)
			data.value.car = res.data
		})
	}
</script>

<style scoped lang="scss">
	.home {
		min-height: 100vh;
		background: #F5F5F5;
		padding: 20rpx 24rpx;
	}

	.car-item {
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.action-bar {
		position: fixed;
		bottom: 2%;
		left: 0;
		right: 0;

	}
</style>